@page "/monitor-details/{id}"
@using Ketum.Monitors
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Ketum.Permissions
@using Microsoft.AspNetCore.Authorization
@inherits KetumComponentBase
@inject IMonitorAppService MonitorAppService
@inject NavigationManager NavigationManager
@attribute [Authorize(KetumPermissions.Monitors.Default)]

<PageHeader Title="@L["MonitorDetails"]" BreadcrumbItems="BreadcrumbItems">
    <Paragraph Alignment="TextAlignment.Right">
        <Button Color="Color.Primary"
                Clicked='() => NavigationManager.NavigateTo("monitors")'>
            @L["BackToMonitors"]
        </Button>
    </Paragraph>
</PageHeader>
  @if (MonitorWithDetails is null)
  {
      <p>
          Loading&hellip;
      </p>
  }
  else if (MonitorWithDetails.UpTimes.Any() && MonitorWithDetails.LoadTimes.Any())
  {
      <Container>
          <Card class="mt-3 mb-3">
              <CardHeader>
                  <Row>
                      <Column ColumnSize="ColumnSize.Is10">
                          <a href="@MonitorWithDetails.MonitorStep.Url" alt="step-url" type="button" class="btn btn-warning">
                              <small>@MonitorWithDetails.Name&nbsp;<i class="fas fa-external-link-alt"></i></small>
                          </a>
                          <small class="ml-3">@L["MonitoredTime"] <Badge Color="Color.Success">@MonitorWithDetails.MonitoredTime @L["Mins"] <i class="fas fa-hourglass-end"></i></Badge></small>&nbsp
                          <small>@L["Uptime"] <Badge Color="Color.Primary">@($"{MonitorWithDetails.UpTimePercent:0.00} %") <i class="fas fa-heartbeat"></i></Badge></small>&nbsp;
                          <small>@L["LoadTime"] <Badge Color="Color.Warning">@($"{TimeSpan.FromMilliseconds(MonitorWithDetails.LoadTime).TotalSeconds:0.00}") @L["Second"] <i class="fas fa-tachometer-alt"></i></Badge></small>&nbsp;
                          <small>@L["DowntimePercent"] <Badge Color="Color.Danger">@($"{MonitorWithDetails.DownTimePercent:0.00} %") <i class="fas fa-heartbeat"></i></Badge></small>&nbsp;
                          <small>@L["Status"]&nbsp;
                              @if (MonitorWithDetails.MonitorStatus.IsIn(MonitorStatusTypes.Up))
                              {
                                  <Badge Color="Color.Success">@($"{MonitorWithDetails.MonitorStatus}")</Badge>
                                  <i class="fas fa-arrow-circle-up"></i>
                              }
                              else if (MonitorWithDetails.MonitorStatus.IsIn(MonitorStatusTypes.Down))
                              {
                                  <Badge Color="Color.Danger">@($"{MonitorWithDetails.MonitorStatus}")</Badge>
                                  <i class="fas fa-arrow-circle-down"></i>
                              }
                              else
                              {
                                  <Badge Color="Color.Warning">@($"{MonitorWithDetails.MonitorStatus}")</Badge>
                                  <i class="fas fa-exclamation-circle"></i>
                              }
                          </small>
                      </Column>
                      <Column>
                          <Row>
                              <Column>
                                  <Tooltip Text=@L["NumberOfDataToBeCalculated"]>
                                      <Select class="ml-2 mr-2" Size="Size.Small" @bind-SelectedValue="@Filter.MaxResultCount">
                                          <SelectItem Value="20">20</SelectItem>
                                          <SelectItem Value="50">50</SelectItem>
                                          <SelectItem Value="100">100</SelectItem>
                                          <SelectItem Value="@TotalMonitorStepLogCount">@L["All"] - @TotalMonitorStepLogCount</SelectItem>
                                      </Select>
                                  </Tooltip>
                              </Column>
                              <Column>
                                  <Tooltip Text=@L["Refresh"]>
                                      <Button Clicked="GetMonitorAsync"><i class="fas fa-sync"></i></Button>
                                  </Tooltip>
                              </Column>
                          </Row>
                      </Column>
                  </Row>
                  <Row Class="mt-3 mb-3">
                      <Column ColumnSize="ColumnSize.Is6">
                          <LineChart @ref="MonitorUpTimeChart" TItem="double"/>
                      </Column>
                      <Column ColumnSize="ColumnSize.Is6">
                          <LineChart @ref="MonitorLoadTimeChart" TItem="double"/>
                      </Column>
                  </Row>
              </CardHeader>
              <CardBody>
                  <Table Bordered="true">
                      <TableHeader ThemeContrast="ThemeContrast.Light">
                          <TableRow>
                              <TableHeaderCell TextAlignment="TextAlignment.Center">@L["StartDate"]</TableHeaderCell>
                              <TableHeaderCell TextAlignment="TextAlignment.Center">@L["EndDate"]</TableHeaderCell>
                              <TableHeaderCell TextAlignment="TextAlignment.Center">@L["Status"]</TableHeaderCell>
                              <TableHeaderCell TextAlignment="TextAlignment.Center">@L["Interval"]</TableHeaderCell>
                              <TableHeaderCell TextAlignment="TextAlignment.Center">@L["Log"]</TableHeaderCell>
                          </TableRow>
                      </TableHeader>
                      <Virtualize Context="stepLog" ItemsProvider="@LoadMonitorAsync" OverscanCount="20">
                          <ItemContent>
                              <TableBody>
                                  <TableRow>
                                      <TableRowCell>@stepLog.StartDate</TableRowCell>
                                      <TableRowCell>@stepLog.EndDate</TableRowCell>
                                      <TableRowHeader>
                                          @{
                                              var status = stepLog.Status;

                                              if (!status.IsIn(MonitorStepStatusTypes.Warning, MonitorStepStatusTypes.Fail, MonitorStepStatusTypes.Error, MonitorStepStatusTypes.Unknown))
                                              {
                                                  <Badge Color="Color.Success">@($"{status}")</Badge>
                                                  <i class="fas fa-arrow-circle-up"></i>
                                              }
                                              else if (!status.IsIn(MonitorStepStatusTypes.Unknown, MonitorStepStatusTypes.Error))
                                              {
                                                  <Badge Color="Color.Danger">@($"{status}")</Badge>
                                                  <i class="fas fa-arrow-circle-down"></i>
                                              }
                                              else
                                              {
                                                  <Badge Color="Color.Warning">@($"{status}")</Badge>
                                                  <i class="fas fa-exclamation-circle"></i>
                                              }
                                          }
                                      </TableRowHeader>
                                      <TableRowCell>@stepLog.Interval @L["Minute"]</TableRowCell>
                                      <TableRowCell>
                                          @if (stepLog.Log is null)
                                          {
                                              <span>@L["ThereIsNoLog"]</span>
                                          }
                                          else
                                          {
                                              <div role="tooltip" data-tooltip="@stepLog.Log">
                                                  <span>@stepLog.Log.TruncateWithPostfix(80).ToLower()</span>
                                              </div>
                                          }
                                      </TableRowCell>
                                  </TableRow>
                              </TableBody>
                          </ItemContent>
                          <Placeholder>
                              <p>
                                  @L["LoadingSoManyStep"]&hellip;
                              </p>
                          </Placeholder>
                      </Virtualize>
                  </Table>
              </CardBody>
          </Card>
      </Container>
  }